<template>
  <div class="pdzb-bg">
      <div class="pdzb-tip">进入直播间中...</div>
      <div class="pdzb-btn">
          <div class="pdzb-btn-item login" v-if="!isLogin" @click="autherBtn"><span>授权登录</span></div>
          <div class="pdzb-btn-item back" @click="navBackIndex"><span>返回商城首页</span></div>
      </div>
      <div>
          <!-- 授权弹出框 -->
        <small-login ref="smalllogin"></small-login>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'
import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
import pdzb from '@/smallapp/pdzb'

export default Vue.extend({
    data() {
        return {
            query: {},
            isLogin: false
        }
    },
    components: {
        SmallLogin
    },
    mounted() {
        // const zbQuery = this.$route.query
        window.addEventListener('wxload', query => {
            this.zbQuery = query
            small.HandleShareParams()
            this.JumpNextPage(this.zbQuery)
        })
        window.addEventListener('wxshow', () => {
            if (small.checkLogin()) {
                this.isLogin = true
            } else {
                this.isLogin = false
            }
        })
        window.$$subscribe('loginReload', reload => {
            if (reload) {
                this.JumpNextPage(this.zbQuery)
            }
        })
    },
    methods: {
        // 判断小程序会员是否登录，登录之后允许跳转下个页面否则停在当前页面
        JumpNextPage(query) {
            if (small.checkLogin()) { // 会员登录信息依然存在
                pdzb.wxPdZb(query)
            } else { // 会员登录信息不存在
                this.$refs.smalllogin.openSmallLoginPop()
            }
        },

        autherBtn() { // 呼出授权弹出层
            this.$refs.smalllogin.openSmallLoginPop()
        },

        navBackIndex() {
            wx.redirectTo({
                url: `/pages/shopIndex/index?type=jump&targeturl=${encodeURIComponent('/index')}`
            })
        }
    },
    beforeDestroy() {
        window.$$unsubscribe('loginReload')
    }
})
</script>

<style lang="scss">
    .pdzb-bg {
        width: 100%;
        height: 100%;
        position: fixed;
        background-image: url('https://img.wifenxiao.com/h5-wfx/images/pdzb_bg.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .pdzb-tip {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #eae8e6;
            font-size: 32px;
        }
        .pdzb-btn {
            position: absolute;
            top: 60%;
            width: 70%;
            left: 15%;
            .pdzb-btn-item {
                height: 80px;
                line-height: 80px;
                text-align: center;
                font-size: 32px;
                border-radius: 40px;
            }
            .login {
                background-color: #ffda44;
                margin-bottom: 60px;
            }
            .back {
                border: 1px solid #ffda44;
                color: #ffda44;
            }
        }
    }
</style>